<!--需要复杂的请参考:https://preview.pro.loacg.com/dashboard/analysis-->
<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="5" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="交易客户总数" :total="MerchantData.Tran_count">
          <a-tooltip title="交易客户总数" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="5" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="充值笔数" :total="MerchantData.rechargecount">
          <a-tooltip title="充值笔数" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="4" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="充值金额合计" :total="'￥'+MerchantData.rechargeMoney">
          <a-tooltip title="充值金额合计" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="5" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="代付笔数" :total="MerchantData.batchcount">
          <a-tooltip title="代付笔数" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="5" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="月代发金额合计" :total="'￥'+MerchantData.batchMoney">
          <a-tooltip title="月代发金额合计" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </chart-card>
      </a-col>
    </a-row>

    <div style="text-align:right;margin-top:15px">
      <!-- <a-date-picker picker="month" @change="TimeChange" v-model="queryParam.Id" /> -->
      <a-month-picker
       placeholder="起始月份"
       @change="TimeChange"
       v-model="TimeMonth"
        />
      <!-- <a-date-picker v-model="queryParam.Id" :disabled-date="disabledDate" picker="month" /> -->
    </div>

    <a-table
      ref="table"
      :columns="columns"
      :rowKey="row => row.Id"
      :dataSource="data"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
      :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :bordered="false"
      size="middle"
    >
      
    </a-table>

  </div>
</template>
<script>
import ChartCard from '@/components/ChartCard/ChartCard' 
const columns = [
  { title: '客户企业名称', dataIndex: 'MerchantName', width: '20%' },
  { title: '充值金额', dataIndex: 'rechargemoney', width: '15%' },
  { title: '实发金额', dataIndex: 'shimoney', width: '15%' },
  { title: '代发金额', dataIndex: 'batchmoney', width: '15%' },
  { title: '代发笔数', dataIndex: 'batchcount', width: '20%' },
  { title: '余额', dataIndex: 'money', width: '15%' },
]
export default {
  components: {
    ChartCard, 
  },
  data() {
    return {
      loading: false,
      data:[],
      TimeMonth:"",
      pagination: {
        current: 1,
        pageSize: 5,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`
      },
      sorter: { field: 'Id', order: 'asc' },
      columns,
      loading: false,
      MerchantData :{},
      queryParam: {Id:""},
      filters: {},
      selectedRowKeys: [],
      MerchantList:[]
    }
  },
  mounted(){
    this.queryParam.Id = new Date().getMonth()+1;
      this.GetData()
  },
  methods:{
      TimeChange(value,index){
          // console.log(index)
          var temp = index.split('-')
          this.queryParam.Id = temp[1]
          this.GetData()
      },
      filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination = { ...pagination }
      this.filters = { ...filters }
      this.sorter = { ...sorter }
      this.GetData()
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    GetData(){
      
      this.selectedRowKeys = []
      this.loading = true
      this.$http
        .post('/Base_Manage/Home/GetTran_statiscs', {
          
          PageIndex: this.pagination.current,
          PageRows: this.pagination.pageSize,
          SortField: this.sorter.field || 'Id',
          SortType: this.sorter.order,
          Search: this.queryParam,
          ...this.filters
        })
        .then(resJson => {
          this.MerchantData = resJson.Data
          this.loading = false
           this.data = resJson.Data.result
          const pagination = { ...this.pagination }
          pagination.total = resJson.Data.Total
          this.pagination = pagination
        })
    },
  }
}
</script>